<template>
  <splitpanes class="default-theme">
    <pane size="20" :min-size="0" max-size="50">
      <view-table ref="tableRef" @rowClick="selectRow" />
    </pane>
    <pane size="80" :min-size="0" max-size="100">
      <h3 v-if="tabs.length === 0">未选择视图</h3>
      <el-tabs v-else v-model="activeName" type="border-card" closable @tab-remove="removeTab">
        <el-tab-pane v-for="item in tabs" :key="item.key" :name="item.key" :label="item.label">
          <lab-design :view="item" @save="$refs.tableRef.loadSource([])" style="height: calc(100vh - 160px);width: 100%" />
        </el-tab-pane>
      </el-tabs>
    </pane>
  </splitpanes>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import '@/theme/splitpanes.css'
import ViewTable from "@/views/system/view/ViewTable";
import ViewInfo from "@/views/system/view/ViewInfo";
import LabDesign from "@/components/lab-design/LabDesign";
export default {
  name: "ViewManage",
  components: {LabDesign, ViewInfo, ViewTable, Splitpanes, Pane},
  data() {
    return {
      tabs: [],
      activeName: ''
    }
  },
  methods: {
    selectRow(row){
      const index = this.tabs.findIndex(item => item.key === row.viewId)
      if (index < 0) {
        row.key = row.viewId
        row.label = row.viewName
        this.tabs.push(row)
      }
      this.activeName = row.viewId
    },
    removeTab(key) {
      this.tabs = this.tabs.filter(tab => tab.key !== key)
      if (this.tabs.length > 0) {
        this.activeName = this.tabs[0].key
      }
    }
  }
}
</script>

<style scoped>

</style>
